<template>
<div>
   <!-- <ul class="mdui-list-dense">
    <li v-for="role in roleList" @click="selectRole(role.roleName)" v-bind:class="[activeName == role.roleName? activeClass : '', normalClass]">
    <div class="mdui-list-item-content ">{{role.roleName}}<li class="mdui-divider"></li></div>
    
     </li>
      
     </ul> -->
      <p>&nbsp</p>
     <el-menu
      default-active="2"
      class="el-menu-vertical-demo">
       <el-menu-item  v-for="role in roleList" :key="role.roleId"      @click="selectRole(role.roleName)" :index="String(role.roleId)">
        <template slot="title">
          <span>{{role.roleName}}</span>
        </template>
       </el-menu-item>
     </el-menu>
    
</div>
</template>
<script>
export default{
  data () {
    return {
     
      activeClass:"mdui-list-item mdui-ripple mdui-list-item-active",
      normalClass:"mdui-list-item mdui-ripple",
      activeName:""
    }
  },
  props:{
    roleList:Array,   
  },
   methods: {
   selectRole(rolename) {
        this.activeName = rolename
        this.$emit('selectName',rolename); //主动触发upupEvent方法，'hehe'为向父组件传递的数
      }
  },
    
}
</script>
